<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>淡入淡出轮播图</title>
<!-- css样式 -->
    <style type="text/css">
        /*清除边距*/
        div,ul,li{
            margin: 0;
            padding: 0;
        }

        /*首先准备一个放图片的容器*/
        .container{
            width: 500px;
            height: 280px;
            position: relative;
            top: 100px;
            left: 30%;
            /*border: 1px solid #ccc;*/
        }

        /*图片样式*/
        .container img{
            position: absolute;        /*把所有图片放在同一个位置*/
            width: 100%;
            transition-duration: 1s;    /*设置过渡时间*/
            opacity: 0;                /*把所有图片变透明*/
        }
        /*图片显示开关*/
        .container img.on{
            opacity: 1;                /*用于显示图片*/
        }

        /*左右按钮 按钮用图片更好点,这里为了简便就用大于小于号*/
        .left, .right{
            position: absolute;
            top: 30%;
            width: 60px;
            height: 100px;
            line-height: 100px;
            background-color: #666;
            opacity: 0.5;
            text-align: center;
            font-size: 60px;
            color: #ccc;
            display: none;    /*先隐藏按钮*/
            cursor: pointer;    /*设置鼠标悬停时的样式*/
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
        .container:hover .left, .container:hover .right{
            display: block;            /*鼠标悬停才容器范围内时显示按钮*/
        }
        .left:hover, .right:hover{
            color: #fff;
        }

        /*焦点*/
        .container ul{
            position: absolute;
            bottom: 0;
            max-width: 500px;
            padding: 5px 200px;
        }
        .container ul li{
            list-style: none;
            float: left;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-left: 10px;
            background-color: #ccc;
            cursor: pointer;
        }
        .container ul li.active{
            background-color: #fff;        /*焦点激活时的样式*/
        }

    </style>
</head>
<body>
    <div class="container">
        <!-- 图片 -->
        <!-- 先把第一张图片显示出来 -->
        <img class="on" src="img/love1.png" />
        <img src="img/love2.png" />
        <img src="img/love3.png" />
        <img src="img/love4.png" />
        <img src="img/love5.png" />

        <!-- 左右按钮 -->
        <div class="left"><</div>
        <div class="right">></div>

        <!-- 焦点 -->
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

<!-- js部分 -->
    <script type="text/javascript">
        //1、找到container下的所有img标签,li标签,左右按钮
        var aImgs = document.querySelectorAll('.container img');
        var aLis = document.querySelectorAll('.container li');
        var btnLeft = document.querySelector('.container .left');
        var btnRight = document.querySelector('.container .right');

        // //检验是否找到
        // console.log(aImgs);
        // console.log(aLis);
        // console.log(btnLeft);
        // console.log(btnRight);

        //点击事件
        //点击按钮图片切换
        var index = 0;        //当前图片下标
        var lastIndex = 0;
        btnRight.onclick = function(){
            //记录上一张图片的下标
            lastIndex = index;
            //清除上一张图片的样式
            aImgs[lastIndex].className = '';
            aLis[lastIndex].className = '';

            index++;
            index %= aImgs.length;    //实现周期性变化
            //设置当前图片的样式
            aImgs[index].className = 'on';
            aLis[index].className = 'active';
        }
        //左边按钮类似
        btnLeft.onclick = function(){
            //记录上一张图片的下标
            lastIndex = index;
            //清除上一张图片的样式
            aImgs[lastIndex].className = '';
            aLis[lastIndex].className = '';

            index--;
            if (index < 0) {
                index = aImgs.length - 1;
            }
            //设置当前图片的样式
            aImgs[index].className = 'on';
            aLis[index].className = 'active';
        }
		
		var timer = setInterval(()=>{
			//记录上一张图片的下标
			lastIndex = index;
			//清除上一张图片的样式
			aImgs[lastIndex].className = '';
			aLis[lastIndex].className = '';
			if(index < 6){
				index++;
				index %= aImgs.length;    //实现周期性变化
			}else{
				index = 0;
			}
			
			//设置当前图片的样式
			aImgs[index].className = 'on';
			aLis[index].className = 'active';
		},1000);
    </script>
</body>
</html>